<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css有意思</title>
  <style>
    ul,li {list-style: none;padding: 0;}
    .container {padding: 20px;}
    .title {padding-top: 50px;}    
  </style>
</head>
<body>

  <main class="container">   
      <h2 class="title">按比例缩放盒子</h2>
      <style>
          .box {display: flex;}
          .item {flex:1;}
          .scaleable {position: relative;padding-bottom: 100%;}
          .scaleable-50p {position: relative;padding-bottom: 50%;}
          .scaleable-inner {position: absolute;left: 0;right: 0;top: 0;bottom: 0;}
          .orange {background-color: orange;}
          .green {background-color: green;}
          .purple {background-color: purple;}
      </style>
      <ul class="box">
        <li class="item">
          <div class="scaleable">            
            <div class="scaleable-inner orange"></div>
          </div>
        </li>
        <li class="item">
          <div class="scaleable">              
            <div class="scaleable-inner green"></div>
          </div>
        </li>
        <li class="item">
          <div class="scaleable">              
            <div class="scaleable-inner purple"></div>
          </div>
        </li>
      </ul>

      <ul class="box">
        <li class="item">
          <div class="scaleable-50p">
            <div class="scaleable-inner orange"></div>
          </div>
        </li>
        <li class="item">
          <div class="scaleable-50p">
            <div class="scaleable-inner green"></div>
          </div>
        </li>
        <li class="item">
          <div class="scaleable-50p">
            <div class="scaleable-inner purple"></div>
          </div>
        </li>
      </ul>
      <!-- ---------------------------------------- -->
      <style>    
        .label {display: inline-block;vertical-align: middle;width:66px}
        .txt-justify {text-align: justify;overflow: hidden;height: 22px;}
        .txt-justify:after {
            display: inline-block;
            content: '';
            overflow: hidden;
            width: 100%;
            height: 0;
        }
      </style>
      <h2 class="title">文本两端对齐</h2>
      <form class="" report-submit="false" bindsubmit="" bindreset="">
        <p>
          <label class="label txt-justify">
            姓名
          </label>
          <input type="text">
        </p>
        <p>
          <label class="label">
            家庭住址
          </label>
          <input type="text">
        </p>
      </form>

      <!-- ---------------------------------------- -->
      <style>   
        .icon-box {display: inline-block;overflow: hidden;width: 80px;}
        .icon {width: 80px;}     
        .drop-shadow {position: relative;left: -80px;border-right:80px solid transparent;}
        .drop-shadow-ok {filter:drop-shadow(80px 0 0 #07c160);-webkit-filter:drop-shadow(80px 0 0 #07c160);}
        .drop-shadow-waiting {filter:drop-shadow(80px 0 0#10aeff);-webkit-filter:drop-shadow(80px 0 0 #10aeff);}
      </style>
      <h2 class="title">改变图片颜色</h2>
      <p>       
        <span class="icon-box">            
          <img src="./img/toast-ok.png" class="icon">
        </span>
        <span class="icon-box">
          <img src="./img/toast-warning.png" class="icon">
        </span>        
      </p>

      <p>
        <span class="icon-box">
          <img src="./img/toast-ok.png" class="icon drop-shadow drop-shadow-ok">
        </span>
        <span class="icon-box">
          <img src="./img/toast-warning.png" class="icon drop-shadow drop-shadow-waiting">
        </span>        
      </p>
  </main>  
</body>
</html>